<html xmlns:th="http://www.thymeleaf.org" >

  <head th:include="layout :: htmlhead" th:with="title='favorites'"></head>
  <link rel="stylesheet" th:href="@{/vendor/fontawesome/css/font-awesome.min.css}"></link>
  <link rel="stylesheet" th:href="@{/vendor/simple-line-icons/css/simple-line-icons.css}"></link>
  <link rel="stylesheet" th:href="@{/media/css/bootstrap.css}" id="bscss"></link>
  <link rel="stylesheet" th:href="@{/media/css/app.css}" id="maincss"></link>
  <link rel="stylesheet" th:href="@{/media/css/theme-i.css}" id="maincss"></link>
  <body>

      <section >
         <div class="content-wrapper">
         	<div class="row unread-alert" th:if="${favorites.name != null and favorites.name =='未读列表'}">
               <div class="col-xs-12">未读列表中的内容将从收集当日起30天后自动进入回收站，赶紧给收藏分类吧~</div>
            </div>

            <div class="row" th:if="${favorites.name != null and favorites.name =='未读列表' and size == 0}" >
               <div class="col-xs-12 text-center">
                  <h2 class="text-thin">未读列表是空的</h2>
                  <p>您的收藏都整洁有序，恭喜您！</p>
                  <p>(在未读列表中的收藏，30天后自动进入右上角的回收站)</p>
               </div>
            </div>



             <div class="row" th:if="${size == 0  and favorites.name !='未读列表' and type == 'my' }" >
               <div class="col-xs-12 text-center">
                  <h2 class="text-thin">您和您的好友，暂未收藏</h2>
                  <p>第一次使用，需要安装网页收集工具</p>
                  <p>点击下面按钮，进行安装。</p>
                  <p>
                    <button class="mt-lg btn btn-primary btn" onClick="locationUrl('/tool','tool')">去安装</button>
                 </p>
               </div>
            </div>

         	<h3 th:if="${(favorites.name != null and favorites.name !='未读列表') or (type == 'garbage')} ">
               <span th:if="${otherPeople != null}" th:text="${otherPeople.userName +'的收藏夹: ' + favorites.name}"></span>
               <span th:if="${otherPeople == null and type != 'garbage'}" th:text="${favorites.name}"></span>
               <span th:if="${otherPeople == null and type != 'garbage'}" class="title-small ml-sm mr-sm" th:text="'('+${favorites.count}+')'">(8)</span>
               <span th:if="${otherPeople != null}" class="title-small ml-sm mr-sm" th:text="'('+${favorites.publicCount}+')'">(8)</span>
               <span th:if="${type == 'garbage'}" th:text="回收站"></span>
               <span th:if="${otherPeople == null and type != 'garbage'}" data-toggle="modal" data-target="#modal-changeFavName" class="title-small clickable icon-pencil mr-sm"></span>
               <div class="pull-right" th:if="${otherPeople == null and type != 'garbage'}">
                  <span class="title-small icon-folder-alt mr-sm"></span>
                  <span data-toggle="modal" data-target="#modal-removeFav" class="title-small clickable">删除</span>
               </div>
            </h3>

            <div class="row" th:if="${type == 'garbage' and collects.size() == 0}">
               <div class="col-xs-12 text-center">
                  <h2 class="text-thin">回收站</h2>
                  <p>未读列表中的收藏30天后会自动被清理到这里。</p>
                  <p>您可以将该收藏重新换个收藏夹，就能从回收站中移出。</p>
               </div>
            </div>

            <div class="row" th:if="${type != 'my' and type != 'garbage' and type != 'explore' and size == 0 and favorites.name !='未读列表'}">
            	<div class="col-xs-12 text-center">
			      <img src="/img/empty_list.png" class="mt shaozi-mobile-qrcode" />
			      <h3 style="color:#aaaaaa" class="mt text-thin">此收藏夹为空</h3>
			   </div>
            </div>

            <div class="row" id="standard" th:if="${collects.size() > 0}">

               <div class="col-lg-12 col-md-12 mt">
                  <ul class="timeline-alt" id="collectStandardList">
                     <li th:each="collect,collectStat : ${collects}" >
                        <a href="javascript:void(0);" class="hidden-xs timeline-badge sharing-user-avatar" th:style="'background-image:url(' + @{(${collect.profilePicture}=='' ? '/img/favicon.png' : ${collect.profilePicture})} + ')'" th:onclick="'locationUrl(\'/user/' + ${collect.userId} + '/0\',\'\');'" ></a>
                        <div class="timeline-panel">
                           <div class="popover right">
                              <div class="arrow"></div>
                              <div class="popover-content">
                                 <div class="table-grid">
                                    <div class="col">
                                       <div class="pull-right dropdown dropdown-list">
                                          <a href="#" data-toggle="dropdown" class="sharing-more-button" th:if="${userId == collect.userId}" >
                                             <span class="fa fa-angle-down"></span>
                                          </a>
                                          <ul class="dropdown-menu animated bounceIn">
                                             <li>
                                                <div class="list-group">
                                                   <a href="javascript:void(0);"  class="list-group-item"  th:onclick="'getCollect(' + ${collect.id} + ',\'\');'" >
                                                      <div class="media-box">
                                                         <div class="pull-left">
                                                            <em class="fa fa-pencil-square-o fa-2x fa-fw text-info"></em>
                                                         </div>
                                                         <div class="media-box-body clearfix">
                                                            <p class="m0">修改收藏</p>
                                                            <p class="m0 text-muted">
                                                               <small>修改收藏的各种属性</small>
                                                            </p>
                                                         </div>
                                                      </div>
                                                   </a>

                                                   <a href="javascript:void(0);"  class="list-group-item" th:onclick="'onCollect(' + ${collect.id} + ',\'\');'">
                                                      <div class="media-box">
                                                         <div class="pull-left">
                                                            <em class="fa fa-trash fa-2x fa-fw text-danger"></em>
                                                         </div>
                                                         <div class="media-box-body clearfix">
                                                            <p class="m0">删除</p>
                                                            <p class="m0 text-muted">
                                                               <small>该分享会永久删除</small>
                                                            </p>
                                                         </div>
                                                      </div>
                                                   </a>
                                                </div>
                                             </li>
                                          </ul>
                                       </div>

                                       <div class="m0">
                                          <a href="javascript:void(0);" class="text-muted" th:text="${collect.userName}" th:onclick="'locationUrl(\'/user/' + ${collect.userId} + '/0\',\'\');'" >user name</a>
                                          <a th:if="${userId == collect.userId}" th:id="'private' + ${collect.id}"   class="deco-none"  title="设为私密"  href="javascript:void(0);"  th:style="'display:' + @{(${collect.type}=='PRIVATE' ? 'none' : 'inline-block')} + ''"  th:onclick="'changePrivacy(' + ${collect.id} + ',\'PRIVATE\');'">
                                             <span class="fa fa-lock" style="color: #eee;"></span>
                                          </a>

                                          <a th:if="${userId == collect.userId}" th:id="'public' + ${collect.id}"  class="deco-none"  title="设为公开"  href="javascript:void(0);"  th:style="'display:' + @{(${collect.type}=='PUBLIC' ? 'none' : 'inline-block')} + ''"  th:onclick="'changePrivacy(' + ${collect.id} + ',\'PUBLIC\');'">
                                             <span class="fa fa-lock text-warning"></span>
                                          </a>
                                          <small th:if="${type != 'explore'}" class="ml-sm text-muted" th:text="${collect.collectTime}">6天前  </small>
                                       </div>
                                    </div>
                                 </div>

                                  <div class="m0" th:text="${collect.remark}"></div>
                                 <div class="media resource-card-thumbnail">
                                    <a  th:href="@{${collect.url}}" th:onclick="'saveLookRecord(' + ${collect.id} + ');'" class="pull-left" target="_blank">
                                       <div class="media-object resource-card-image"  th:style="'background-image:url(' + @{(${collect.logoUrl}=='' ? '/img/favicon.png' : ${collect.logoUrl})} + ')'" ></div>
                                    </a>

                                    <div class="media-body">
                                       <h4 class="visible-xs media-heading resource-card-title-xs">
                                          <a target="_blank" th:onclick="'saveLookRecord(' + ${collect.id} + ');'" th:href="@{${collect.url}}" th:text="${collect.title}">title</a>
                                       </h4>

                                       <h3 class="hidden-xs media-heading resource-card-title">
                                          <a target="_blank" th:onclick="'saveLookRecord(' + ${collect.id} + ');'" th:href="@{${collect.url}}" th:text="${collect.title}">title</a>
                                       </h3>

                                       <div class="hidden-xs resource-card-content">
                                          <p  th:text="${collect.description}">description</p>
                                       </div>
                                    </div>
                                 </div>

                                 <div class="m0">

                                    <span class="icon-folder mr-sm"></span>
                                    <a href="javascript:void(0);" class="normal-color-a ng-binding"   th:text="${collect.favoriteName}" th:onclick="'locationUrl(\'/standard/' + ${collect.favoritesId} + '/'+${collect.userId}+'\',\''+ ${collect.favoritesId} + '\');'" >文件加名称</a>
                                    <div class="pull-right hidden-xxs">
                                        <small>
                                          <a th:id="'like' + ${collect.id}"  class="sharing-action-button" th:style="'display:' + @{(${collect.Praise} ? 'none' : 'inline-block')} + ''"    th:onclick="'changeLike(' + ${collect.id} + ');'">
                                             <span class="fa fa-thumbs-o-up"></span>
                                             <show th:id="'likeS' + ${collect.id}"  th:text="|点赞(${collect.praiseCount})|" ></show>
                                          </a>
                                           <if style="display:none"  >
										     |
										  </if>

                                          <a th:id="'unlike' + ${collect.id}"  class="sharing-action-button" th:style="'display:' + @{(${collect.Praise} ? 'inline-block' : 'none')}+ ''"    th:onclick="'changeLike(' + ${collect.id} + ');'">
                                             <span class="fa fa-thumbs-up"></span>
                                          	 <show th:id="'unlikeS' + ${collect.id}" th:text="|取消点赞(${collect.praiseCount})|"></show>
                                          </a>
                                          <input th:id="'praiseC' + ${collect.id}" type="hidden" name="praiseC" th:value="${collect.praiseCount}" />
                                          <input th:id="'commentC' + ${collect.id}" type="hidden" name="commentC" th:value="${collect.commentCount}" />
                                          |
                                          <a  class="sharing-action-button btn-comment" href="javascript:void(0);" th:onclick="'switchComment(' + ${collect.id} + ');'" >
                                             <span class="fa fa-comment-o"></span>
                                             <show th:id="'commentS' + ${collect.id}" th:text="|评论(${collect.commentCount})|">	 评论(0)</show>
                                          </a>

										  <if th:if="${userId != collect.userId}" >
										     |
										  </if>

                                          <a class="sharing-action-button"  th:if="${userId != collect.userId}"  th:onclick="'getCollect(' + ${collect.id} + ',\'\');'" >

                                             <span class="fa fa-spoon"></span>
                                           	    收藏
                                          </a>
                                       </small>
                                    </div>
                                 </div>

                                 <div class="collapse" th:id="'collapse' + ${collect.id}">
                                    <comments th:id="'commentList' + ${collect.id}"></comments>
                                    <div class="media p0" th:id="'comment' + ${collect.id}">
                                       <div class="media-body">
                                          <form>
                                             <div class="input-group">
                                                <input th:id="'commentContent' + ${collect.id}"   type="text" placeholder="输入评论..." class="form-control"/>
                                                <span class="input-group-btn">
                                                   <button class="btn btn-default" type="button" th:onclick="'comment(' + ${collect.id} + ');'" >发送</button>
                                                </span>
                                             </div>
                                          </form>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </li>
                    </ul>

                    <!-- <button id="loadStandardNoMore" class="mt-lg btn btn-warning btn-block" style="display:none" >没有更多了</button> -->

                    <!-- <button th:if="${size == 15}"  id="loadStandardMore" class="mt-lg btn btn-primary btn-block" th:onclick="'loadStandardMore();'">加载更多</button> -->

                    <button  id="loadStandardMore" class="mt-lg btn btn-primary btn-block" style="display:none;">加载更多</button>
                    <div id="loadingStandard" style="text-align:center;margin:20px;display:none;"><img src="/img/loading.gif" width="64" height="64" /></div>
					<br />
                    <br />
                    <br />
               </div>
            </div>

            <input type="hidden" name="collectId" id="collectId" />
            <input type="hidden" name="forward" id="forward" th:value="'/standard/'+${type}+'/0'" />
            <input type="hidden" name="pageType" id="pageType" th:value="${type}" />
            <input type="hidden"  id="userId" th:value="${userId}" />
         </div>

      </section>

  </body>
  <script th:src="@{/webjars/vue/1.0.24/vue.min.js}"></script>
  <script th:src="@{/webjars/vue-resource/0.7.0/dist/vue-resource.min.js}"></script>
  <script th:src="@{/vendor/parsleyjs/dist/parsley.min.js}"></script>
  <script type='text/javascript' th:inline="javascript">
      $(function(){
          var favorites = /*[[${favorites}]]*/;
          if(null != favorites ){
              $("#favoritesId").val(favorites.id);
          }
      });
  </script>

</html>

